            body,
            html {
                width: 100%;
                height: 100%;
                background: #f4f4f4;
            }
            
            .video-container-wrap {
                width: 1440px;
                height: auto;
                margin: 0 auto;
                /* background: #fff; */
            }
            
            .video-container {
                width: 1440px;
                margin: 13px auto;
                height: auto;
            }
            
            .video-left {
                float: left;
                width: 1060px;
                height: auto;
                /* background-color: slategrey; */
            }
            
            .video-info {
                margin-bottom: 16px;
            }
            
            .video-title-wrap .video-slogan {
                float: left;
                width: 45px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #3FC3FF;
                font-size: 14px;
                color: #fff;
                border-radius: 2px;
            }
            
            .video-info .video-title {
                font-size: 32px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #333333;
                height: auto;
                margin-bottom: 20px;
            }
            
            .video-info .video-data {
                width: 100%;
                height: auto;
                margin-bottom: 20px;
            }
            
            .up-desc {
                float: left;
            }
            
            .up-avator {
                display: inline-block;
                width: 48px;
                height: 48px;
            }
            
            .up-avator img {
                width: 100%;
                height: 100%;
            }
            
            .up-info {
                display: inline-block;
            }
            
            .video-option {
                float: right;
            }
            
            .video-option .option-collect,
            .video-option .option-share {
                /* width: */
                display: inline-block;
                padding: 8px 20px;
                line-height: 20px;
                background: #fff;
                border-radius: 22px;
                cursor: pointer;
            }
            
            .video-option .option-share {
                margin-left: 30px;
            }
            
            .video-option span {
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
            }
            
            .video-option .option-collect i {
                display: inline-block;
                width: 22px;
                height: 20px;
                margin-right: 4px;
                /* vertical-align: middle; */
                background: url(../img/icon-collect.png) no-repeat;
                background-size: 100% 100%;
            }
            
            .video-option .option-share i {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: 4px;
                /* vertical-align: middle; */
                background: url(../img/icon-share.png) no-repeat;
                background-size: 100% 100%;
            }
            
            .video-play {
                width: 1060px;
                height: auto;
                margin-bottom: 20px;
            }
            
            .video-time {
                margin-left: 26px;
                margin-right: 46px;
            }
            
            .player-wrap {
                width: 1070px;
                height: 763px;
                box-shadow: 0px 5px 4px 0px rgba(0, 20, 91, 0.11);
            }
            
            .player-wrap .bofqi {
                width: 1070px;
                height: 700px;
            }
            
            .player-wrap .video-toolbar {
                width: 100%;
                height: 63px;
                line-height: 63px;
                padding-left: 20px;
            }
            
            .video-toolbar .toolbar-items {
                float: left;
                width: 92px;
                margin-right: 8px;
                cursor: pointer;
            }
            
            .toolbar-items img {
                vertical-align: middle;
                width: 24px;
                height: 23px;
            }
            
            .toolbar-items span {
                height: 15px;
                font-size: 16px;
                color: #878787;
                margin-left: 5px;
            }
            
            .toolbar-items .share-play {
                width: 24px;
                height: 23px;
            }
            /* 相关图集 */
            
            .atlas-wrap {
                width: 1060px;
                height: 216px;
                background-color: #fff;
                margin-bottom: 20px;
            }
            
            .atlas-wrap .atlas-title {
                padding: 20px;
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #333333;
            }
            
            .atlas-wrap .atlas-list {
                width: 1040px;
                height: 130px;
                padding: 0px 0px 20px 20px;
                white-space: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
            }
            
            .atlas-wrap::-webkit-scrollbar {
                display: none;
            }
            
            .atlas-wrap .atlas-list .atlas-items {
                display: inline-block;
                width: 232px;
                height: 130px;
                background: #999;
                margin-right: 10px;
                position: relative;
            }
            
            .atlas-wrap .atlas-list .atlas-items .atlas-items-title {
                position: absolute;
                top: 0;
                left: 0;
                width: 232px;
                height: 50px;
                overflow: hidden;
                text-align: justify;
                word-break: break-all;
                white-space: normal;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                padding: 10px 8px;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.33) 67%, rgba(244, 244, 244, 0) 100%);
                color: #fff;
            }
            /* 评论区域 */
            
            .comment-list-wrap {
                /* width:100%; */
                padding: 19px 20px;
                height: auto;
                background: #fff;
            }
            
            .comment-send {
                margin: 60px 0;
            }
            
            .comment-send-author {
                float: left;
                width: 48px;
                height: 48px;
            }
            
            .comment-send-author img {
                width: 100%;
                height: 100%;
            }
            
            .textarea-container {
                float: left;
                margin-left: 10px;
                height: 120px;
                position: relative;
            }
            
            .textarea-container textarea {
                font-size: 18px;
                display: inline-block;
                box-sizing: border-box;
                border: 1px solid #4DA7D4;
                overflow: auto;
                border-radius: 4px;
                color: #BFBFBF;
                width: 962px;
                height: 114px;
                padding: 5px 10px;
                line-height: normal;
                border-radius: 8px;
            }
            
            .commit-wrap {
                float: right;
                width: 80px;
                height: 114px;
            }
            
            .comment-number {
                position: absolute;
                bottom: 7px;
                right: 111px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #BFBFBF;
                font-size: 18px;
            }
            
            .comment-btn {
                /* width: 80px; */
                position: absolute;
                bottom: 15px;
                right: 10px;
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                color: #fff;
                border-radius: 20px;
                text-align: center;
                vertical-align: top;
                cursor: pointer;
                padding: 0px 20px;
                background: #999999;
            }
            
            .commit-list-wrap {
                margin: 60px 0;
            }
            
            .comment-head {
                font-size: 18px;
                line-height: 24px;
                color: #1A1A1A;
                margin: 0 0 20px;
            }
            
            .comment-head-l {
                float: left;
            }
            
            .comment-head-l span:first-child {
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #333333;
            }
            
            .comment-head-r {
                float: right;
                cursor: pointer;
            }
            
            .comment-head-r i {
                display: inline-block;
                width: 23px;
                height: 16px;
                margin-right: 2px;
                vertical-align: middle;
                background: url(../img/icon-orderby.png) no-repeat;
                background-size: 100% 100%;
            }
            
            .comment-head-r span {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #999999;
            }
            
            .comment-list-area {}
            
            .comment-header {
                margin: 0 0 24px;
                border-bottom: 1px solid #e5e9ef;
            }
            
            .comment-header .tabs-order {
                float: left;
                margin-bottom: -1px;
            }
            
            .comment-header .tabs-order li {
                background-color: transparent;
                border-radius: 0;
                border: 0;
                padding: 8px 0;
                margin-right: 16px;
                border-bottom: 1px solid transparent;
                position: relative;
                float: left;
                cursor: pointer;
                line-height: 20px;
                height: 20px;
                font-size: 14px;
                font-weight: 700;
                color: #222;
            }
            
            .comment-header .tabs-order li.on {
                border-bottom: 1px solid #00a1d6;
                color: #00a1d6;
            }
            
            .paging-box .result {
                padding-right: 10px;
            }
            
            .paging-box .current {
                color: #00a1d6;
                font-weight: 700;
            }
            
            .paging-box .tcd-number {
                color: #222;
                cursor: pointer;
                text-align: center;
                margin: 0 4px;
                text-decoration: none;
                line-height: 26px;
            }
            
            .comment-list {
                /* padding-top: 20px; */
            }
            
            .comment-list .list-item .user-face {
                float: left;
                /* margin: 24px 0 0 5px; */
                position: relative;
            }
            
            .comment-list .list-item .con {
                position: relative;
                margin-left: 60px;
                /* padding: 22px 0 14px; */
            }
            
            .comment-list .list-item .user-face img {
                width: 48px;
                height: 48px;
                border-radius: 50%;
            }
            
            .comment-list .list-item .user {
                font-size: 20px;
                font-weight: 600;
                color: #333;
                display: block;
                word-wrap: break-word;
                position: relative;
                margin-bottom: 2px;
            }
            
            .comment-list .list-item .time {
                font-size: 14px;
                font-family: PingFang SC;
                color: #999999;
                margin-bottom: 20px;
            }
            
            .comment-list .list-item .text {
                line-height: 20px;
                padding: 2px 0;
                font-size: 18px;
                text-shadow: none;
                overflow: hidden;
                word-wrap: break-word;
                word-break: break-word;
                color: #1a1a1a;
                margin-bottom: 20px;
            }
            
            .comment-list .list-item .info {
                color: #868686;
                line-height: 26px;
                font-size: 14px;
            }
            
            .comment-list .list-item .info .plad a {
                color: #868686;
            }
            
            .comment-list .list-item .info>span {
                margin-right: 20px;
                cursor: pointer;
            }
            
            .comment-list .list-item .info span img {
                width: 19px;
                height: 18px;
                /* padding-top: 10px; */
                vertical-align: text-bottom;
                margin-right: 5px;
            }
            
            .comment-list .list-item .info .btn-hover {
                padding: 0 5px;
                border-radius: 4px;
                margin-right: 15px;
                cursor: pointer;
                display: inline-block;
            }
            /* 回复文本框 */
            
            .reply-box {
                display: none;
                /* margin-top:-20px; */
                /* padding-left:56px; */
            }
            /* 回复的评论 */
            
            .reply-comment {
                padding-top: 20px;
            }
            
            .reply-comment-list {}
            
            .reply-comment-list .user-face {
                float: left;
            }
            
            .reply-comment-list .user-reply-con {
                float: left;
                margin-left: 10px;
            }
            /* 右侧弹幕列表 */
            
            .video-right {
                float: left;
                margin-left: 20px;
                margin-top: 140px;
                width: 360px;
                /* background: #fff; */
                /* height: 1000px; */
                /* background-color: azure; */
            }
            
            .video-right.up-info,
            .barrage-wrap {
                margin-bottom: 16px;
                padding-left: 20px;
                padding-right: 20px;
            }
            
            .barrage-wrap {
                width: 100%;
                height: auto;
                background: #fff;
            }
            
            .barrage-title-wrap {
                width: 100%;
                height: 40px;
                line-height: 40px;
            }
            
            .barrage-collapse-wrap {
                width: 100%;
                height: 300px;
                background: #ffffff;
                /* display: none; */
            }
            
            .barrage-title-l {
                float: left;
                font-size: 16px;
                color: #878787;
            }
            
            .barrage-title-r {
                float: right;
            }
            
            .barrage-items-title {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            
            .barrage-items-title div,
            .barrage-items-content div {
                font-size: 14px;
                font-family: PingFang SC;
                color: #999999;
                margin-bottom: 20px;
                /* margin-right:30px; */
            }
            /* .barrage-items-title div,
.barrage-items-content div:s- .barrage-items-title div:last-child {
    margin-right: 0px;
} */
            
            .barrage-items-scroll {
                width: 100%;
                height: calc(100% - 60px);
                overflow-y: auto;
            }
            
            .barrage-items-scroll::-webkit-scrollbar {
                display: none;
            }
            
            .barrage-items-scroll .barrage-items-content {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            
            .barrage-items-title div:nth-child(2) {
                width: 210px;
            }
            
            .barrage-items-scroll .barrage-items-content div:nth-child(2) {
                width: 160px;
                height: auto;
            }
            
            .recommend-list {
                /* width: 100%; */
                padding: 23px 19px;
                height: auto;
                background: #fff;
            }
            
            .recommend-list .rec-title {
                font-size: 24px;
                font-weight: 600;
                color: #333;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-pack: justify;
                justify-content: space-between;
                /* margin-bottom: 6px; */
            }
            
            .rec-list {
                margin-top: 22px;
            }
            
            .video-page-card {
                /* padding: 6px 0; */
            }
            
            .video-page-card .card-box {
                display: -ms-flexbox;
                display: flex;
                margin-bottom: 20px;
            }
            
            .video-page-card .card-box:last-child {
                margin-bottom: 0px;
            }
            
            .video-page-card .card-box .pic-box {
                position: relative;
                width: 320px;
                height: 173px;
                border-radius: 2px;
                background: #f4f5f7;
            }
            
            .video-page-card .card-box .pic-box .pic {
                position: relative;
                overflow: hidden;
                border-radius: 2px;
                width: 320px;
                height: 173px;
            }
            
            .video-page-card .card-box .pic-box .pic img {
                width: 320px;
                height: 173px;
            }
            
            .pic .pic-title {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                padding: 9px 19px;
                font-size: 14px;
                font-family: PingFang SC;
                color: #FFFFFF;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.33) 67%, rgba(244, 244, 244, 0) 100%);
            }
            
            .pic .pic-type {
                position: absolute;
                top: 10px;
                left: 10px;
                width: auto;
                height: 32px;
                line-height: 32px;
                padding: 0px 9px;
                background: rgba(0, 0, 0, 0.5);
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #fff;
            }
            
            .pic-type-title {}
            
            .pic-total i {
                display: inline-block;
                width: 13px;
                height: 14px;
                margin-right: 4px;
                vertical-align: middle;
                background: url(../img/icon-play.png) no-repeat;
                background-size: 100% 100%;
            }
            
            .pic-album i {
                display: inline-block;
                width: 13px;
                height: 14px;
                margin-right: 4px;
                vertical-align: middle;
                background: url(../img/icon-album.png) no-repeat;
                background-size: 100% 100%;
            }
            
            .video-page-card .card-box .info {
                margin-left: 10px;
                -ms-flex: 1;
                flex: 1;
                font-size: 0;
            }
            
            .video-page-card .card-box .info .title {
                display: block;
                font-size: 14px;
                font-weight: 500;
                color: #878787;
                height: 36px;
                line-height: 18px;
                margin-bottom: 6px;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            
            .video-page-card .card-box .info .count-up {
                width: 160px;
                display: inline-block;
                height: 16px;
                width: 100%;
                color: #999;
                font-size: 12px;
                margin-bottom: 4px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .video-page-card .card-box .info .count-up a {
                color: #999;
            }
            
            .video-page-card .card-box .info .count {
                display: inline-block;
                height: 16px;
                width: 100%;
                color: #999;
                font-size: 12px;
            }
            
            .info .count div:first-child {
                float: left;
                width: 50%;
            }
            
            .info .count div:last-child {
                float: right;
            }
            
            .pic-desc-discovr {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                font-size: 18px;
                font-family: PingFang SC;
                color: #FFFFFF;
                background: linear-gradient(180deg, rgba(244, 244, 244, 0) 1%, rgba(0, 0, 0, 0.33) 67%, rgba(0, 0, 0, 0.99) 100%);
                /* background: linear-gradient( 180deg, rgba(0, 0, 0, 0.99) 1%, rgba(0, 0, 0, 0.33) 67%, rgba(244, 244, 244, 0) 100%); */
                padding: 28px 10px 9px 10px;
            }
            
            .pic-desc-discovr .pic-title-l {
                height: 24px;
                line-height: 40px;
            }
            
            .pic-title-l {
                float: left;
            }
            
            .pic-avator-img-thumb {
                float: left;
                width: 24px;
                height: 24px;
                /* line-height: 24px; */
                margin-right: 7px;
            }
            
            .pic-avator-img-thumb img {
                display: inline-block;
                width: 100% !important;
                height: auto !important;
            }
            
            .pic-avator-nickle {
                float: left;
                width: auto;
                height: 32px;
                line-height: 32px;
                /* line-height: 0.84rem; */
                /* font-weight: bold; */
                font-size: 14px;
                color: #fff;
            }
            
            .pic-title-r {
                float: right;
                /* padding-top: 10px; */
            }
            
            .pic-title-r-visit {
                margin-right: 10px;
                font-size: 10px;
            }
            
            .pic-title-r-visit i {
                display: inline-block;
                width: 20px;
                height: 16px;
                margin-right: 4px;
                vertical-align: middle;
                background: url(../img/liulan.png) no-repeat;
                background-size: 100% 100%;
            }
            
            .pic-desc-discovr .pic-title-r-like {
                font-size: 10px;
            }
            
            .pic-title-r-like i {
                display: inline-block;
                width: 18px;
                height: 18px;
                margin-right: 4px;
                vertical-align: middle;
                background: url(../img/like.png) no-repeat;
                background-size: 100% 100%;
            }
            /* 弹幕的样式 */
            
            .barrage-style {
                position: absolute;
                bottom: 30px;
                left: 0px;
                /* width: 194px;
    height: 304px; */
                background: rgba(255, 255, 255, 0.92);
                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
                z-index: 9999;
                display: none;
                padding: 20px 20px;
            }
            
            .barrage-style .mask {
                width: 100%;
                height: 100%;
                /* margin-top: 5rem; */
                background: rgba(0, 0, 0, .5);
                z-index: 1110;
            }
            
            .barrage-setting-l {
                float: left;
                width: 24px;
                height: 20px;
            }
            
            .barrage-setting-l img {
                display: inline-block;
                width: 100%;
                height: 100%;
                vertical-align: middle;
            }
            
            .barrage-setting-r {
                float: right;
                width: 72px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                background: #4DA7D4;
                border-radius: 18px;
                font-size: 14px;
                font-family: PingFang SC;
                color: #FFFFFF;
                cursor: pointer;
            }
            
            .opt-btn {
                float: right;
                width: 72px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                background: #4DA7D4;
                /* border-radius: 18px; */
                font-size: 14px;
                font-family: PingFang SC;
                color: #FFFFFF;
                cursor: pointer;
            }
            
            .barrage-style-items {
                /* margin-bottom: 30px; */
            }
            
            .barrage-style-items-title {
                height: 15px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
            }
            
            .barrage-style-items-type {
                margin-top: 10px;
            }
            
            .barrage-style-position {
                margin-top: 10px;
            }
            
            .barrage-style-items-type span {
                display: inline-block;
                width: 72px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: #CCCCCC;
                font-size: 14px;
                font-family: PingFang SC;
                color: #FFFFFF;
                margin-right: 10px;
                cursor: pointer;
            }
            
            .barrage-style-items-type span:last-child {
                margin-right: 0px;
            }
            
            .barrage-position {
                float: left;
                width: 29px;
                height: 48px;
                margin-right: 19px;
                margin-top: 5px;
            }
            
            .barrage-position img {
                width: 29px;
                height: 29px;
                vertical-align: middle;
            }
            
            .barrage-position div {
                cursor: pointer;
                margin-top: -9px;
                width: 28px;
                height: 14px;
                font-size: 14px;
                color: #999;
            }
            
            .barrage-color-choose {
                margin-top: 18px;
                height: 24px;
                margin-bottom: 15px;
            }
            
            .barrage-color-choose div {
                display: inline-block;
                width: 42px;
                height: 24px;
                background: #FFD300;
            }
            
            .barrage-color-choose input {
                width: 102px;
                height: 24px;
                background: #F4F4F4;
                position: relative;
                top: -6px;
            }
            
            .barrage-color-type {
                width: 154px;
            }
            
            .barrage-color-items {
                width: 24px;
                height: 24px;
                float: left;
                background: #333333;
                margin-right: 4px;
                margin-bottom: 4px;
            }
            
            .barrage-color-items:nth-child(5n) {
                margin-right: 0px;
            }
            
            .barrage-color-items:nth-child(1) {
                background: #333333;
            }
            
            .barrage-color-items:nth-child(2) {
                background: #666666;
            }
            
            .barrage-color-items:nth-child(3) {
                background: #999999;
            }
            
            .barrage-color-items:nth-child(4) {
                background: #FFD300;
            }
            
            .barrage-color-items:nth-child(5) {
                background: #60FF00;
            }
            
            .barrage-color-items:nth-child(6) {
                background: #FF0000;
            }
            
            .barrage-color-items:nth-child(7) {
                background: #00D2FF;
            }
            
            .barrage-color-items:nth-child(8) {
                background: #0006FF;
            }
            
            .barrage-color-items:nth-child(9) {
                background: #F000FF;
            }
            
            .barrage-color-items:nth-child(10) {
                background: #936800;
            }
            
            .barrage-style-items-type .active-size {
                background: #4DA7D4;
            }
            
            .barrage-position .active-position {
                color: #4DA7D4;
            }
            
            .qingxidu-wrap {
                widows: 100px;
                height: 100px;
                background-color: #fff;
                display: none;
                padding: 23px 23px 0px 23px;
            }
            
            .qingxidu-items {
                width: 100%;
                height: 30px;
                cursor: pointer;
            }